<template>
  <div class="a">
    <scroll class="b" ref="scroll">
      <div class="c" ref="c">
        <div class="item" v-for="(item, index) in itemList" :key="index">
          <div>
            <img :src="item.image" alt="" />
            <div class="title">{{ item.title }}</div>
          </div>
        </div>
        <h2 class="nogoods">下面没有了哦</h2>
        <h2 class="nogoods">下面没有了哦</h2>
        <h2 class="nogoods">下面没有了哦</h2>
        <h2 class="nogoods">下面没有了哦</h2>
        <h2 class="nogoods">下面没有了哦</h2>
        <h2 class="nogoods">下面没有了哦</h2>
      </div>
    </scroll>
  </div>
</template>

<script>
import { getSubcategory } from "@/network/catgory.js";
import Scroll from "../../../components/common/scroll/Scroll.vue";
export default {
  components: { Scroll },
  name: "Catgorylist",

  data() {
    return {
      itemList: {},
    };
  },
  computed: {},
  props: {
    maitKey: {},
  },
  created() {
    getSubcategory(this.maitKey).then((res) => {
      // console.log(res);
      this.itemList = res.data.list;
    });
  },
  updated() {
    getSubcategory(this.maitKey).then((res) => {
      // console.log(res);
      this.itemList = res.data.list;
    });
  },
  mounted() {},

  methods: {
    aa() {
      console.log(this.maitKey);
    }
  },
};
</script>

<style lang="css" scoped>
.a {
  height: calc(100vh - 49px);
  overflow: hidden;
  width: 75vw;
  display: inline-block;
  /* float: right; */
}
.b {
  height: calc(100vh - 49px);
}
.c {
  height: 170vh;
}
.item {
  display: inline-block;
  text-align: center;
  border-bottom: 1px solid #eee;
  height: 30vw;
}
.title {
  font-size: 3vw;
}
img {
  width: 24vw;
}
.nogoods {
  text-align: center;
  height: 30vw;
  line-height: 30vw;
  color: #fff;
  background-color: rgba(100, 100, 100, 0.5);
}
</style>